<!--登录页-->
<!--登录页-->
<style scoped lang="less">
a,
a:hover,
a:active,
a:visited,
a:link,
a:focus,
div {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background: none;
  text-decoration: none;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  -webkit-text-fill-color: #333;
}
.bg-white:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: -1;
}
.login-btn {
  height: 48px;
  line-height: 48px;
  background: rgba(119, 186, 189, 1);
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  cursor: pointer !important;
}
.login-vision {
  text-align: center;
  font-size: 12px;
  color: rgba(191, 191, 191, 1);
  margin: 25px 0 0;
  line-height: 1;
  height: 12px;
}
.login-box {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 45%;
  left: 50%;
  width: 100%;
}
.login-forget {
  text-align: right;
  line-height: 1;
  padding: 10px 0;
  margin: 0 0 40px;
}
.login-forget a {
  color: #bfbfbf;
  text-decoration: none;
}
.logo-img {
  width: 2.76rem;
  margin: 0 auto 0.34rem;
  text-align: center;
}
.logo-img img {
  width: 100%;
}
.logo-img .name {
  font-size: 0.28rem;
  color: #606f7a;
  line-height: 0.65rem;
  height: 0.65rem;
}
.login-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  background: url("~images/bg/login_bg.png") no-repeat;
  background-size: 100% auto;
  height: 1.43rem;
}
.login-wrap {
  padding: 0 30px;
}
.login-form {
  height: 52px;
  position: relative;
}
.login-form input {
  float: left;
  width: 100%;
  height: 14px;
  padding: 30px 5px 8px;
  font-size: 16px;
  border: none;
  outline: none;
}
.login-form:after,
.login-form:before {
  background: #efefef;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.login-form:before {
  height: 1px;
  z-index: 2;
  background: #77babd;
  transform: scalex(0);
  transition: transform 0.45s;
}
.login-form.focus-line:before {
  transform: scalex(1);
}
</style>

<template>
  <div class="bg-white">
    <div id="loadMask" class="loader-base" style="display:none">
      <div class="loader-wrap"></div>
    </div>
    <div class="login-box">
      <div class="logo-img">
        <img src="~images/logo/logo1.png">
        <div class="name">透明 · 智慧 · 共享</div>
      </div>
      <div class="login-wrap">
        <div class="login-form">
          <input type="tel" placeholder="请输入账号" id="userName" v-model="userName">
        </div>
        <div class="login-form">
          <input type="password" placeholder="请输入密码" id="userPwd" v-model="userPwd">
        </div>
        <div class="login-forget cf">
          <!-- <a class="f-r" href="/#/user/password?forget=1">忘记密码</a> -->
        </div>
        <div class="login-btn" id="subBtn" @click="login()">登 录</div>
        <div class="login-vision">版本号：v3.0</div>
      </div>
    </div>
    <div class="login-footer"></div>
  </div>
</template>

<script>
import { JSEncrypt } from "jsencrypt";
export default {
  data() {
    return {
      userName: "",
      userPwd: "",
      nameFocus: false,
      pwFocus: false,
      ua: navigator.userAgent.toLowerCase(),
      RegistrationID: ""
    };
  },
  created() {
    this.$nextTick(function() {
      this.focus();
    });
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },

    btnC() {
      $("#subBtn").val("登录");
      $("#userName , #userPwd").removeAttr("readonly", false);
      $("#subBtn").removeAttr("disabled", false);
    },

    login() {
      var self = this;
      // 用户名
      if (!this.userName) {
        this.Toast({
          message: "请输入用户名"
        });
        return false;
      }
      // 密码
      if (!this.userPwd) {
        this.Toast({
          message: "密码不能为空"
        });
        return false;
      }
      $("#subBtn").val("正 在 登 录 中 ...");
      $("#userName, #userPwd").attr("readonly", true);
      $("#subBtn").attr("disabled", "disabled");

      this.Ajax.post("token/getPublicKey").then(result => {
        var key = "";
        //公钥
        var publicKey = result.data;
        this.$store.dispatch('tokenState/setPublicKey', publicKey);
        // 加密
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(publicKey);
        key = encrypt.encrypt(this.userPwd);
        var params = {
          clientType: "H",
          username: this.userName,
          password: key
        };
        self.Ajax.post("token/get", params).then(result => {
          var errorCode = result.errorCode;
          if (errorCode > 0) {
            $("#userName, #userPwd").attr("readonly", false);
            $("#subBtn").removeAttr("disabled");
            self.Toast({
              message: result.message || "操作失败，请稍后重试"
            });
          } else {
            localStorage.userinfo = JSON.stringify(result.data);
            console.log(result.data);
            self.$router.push({
              path: "/index"
            });
          }
        });
      });
    },
    focus() {
      $("input").each(function() {
        $(this).focus(function() {
          $(this)
            .parent()
            .addClass("focus-line");
        });
        $(this).blur(function() {
          $(this)
            .parent()
            .removeClass("focus-line");
        });
      });
    }
  }
};
</script>